layui.config({
    dir: '/eshop/static/layui/'
})

layui.use('table',function () {
    var $ = layui.$//通过layui获取到jquery
    var table = layui.table,form = layui.form, layer = layui.layer;
    table1=table.render({
        elem: '#demo'
        , height: 450
        , url: '/eshop/product.do?m=pageAll' //数据接口
        , page: true //开启分页
        ,request: {
            pageName: 'current' //页码的参数名称，默认：page
            ,limitName: 'limit' //每页数据量的参数名，默认：limit
        }
        /*, parseData: function (data) {
            console.log(data);
        }*/
        ,done:function (res,curr,count){
            hoverOpenImg();//显示大图
        }
        , cols: [[ //表头
            {field: 'id', title: 'ID', fixed: 'left'}
            , {field: 'productName', title: '商品名称'}
            ,{ field: 'productImage',title: '商品图片',templet:function (d) {
                    return '<img src="/eshop/Img.do?m=showImg&name='+d.productImage+'" style="width: 50px;height: 50px;" >'
                }}
            , {field: 'price', title: '价格',templet:function (d) {
                    return d.price+"￥";
                }}
            , {field: 'productType', title: '商品类型',templet:function (d) {
                    return d.pt.productTypeName;
                }}
            , {field: 'productDesc', title: '商品简介',templet:function (d) {
                    return '<img src="/eshop/Img.do?m=showImg&name='+d.productDesc+'" style="width: 50px;height: 50px;" >'
                }}
            , {field: 'createTime', title: '添加时间',templet:function (d) {
                    return format(d.createTime)
                }}
            , {field: 'productBrand', title: '商品品牌',templet:function (d) {
                    return d.brand.brandName;
                }}
            , {
                field: 'id', title: '操作', templet: function (d) {
                    return '<button onclick="update(\''+d.id+'\')" class="layui-btn layui-btn-sm">修改</button>' +
                        '<button onclick="deleteData(\''+d.id+'\')" class="layui-btn layui-btn-sm">删除</button>'
                }
            }
        ]]
    })

    //添加点击方法
    $("#add").click(function () {
        m='add';
        $('#myfrom')[0].reset();
        renderDropdownList();
        layer.open({
            type: 1,
            title: "添加商品",
            maxmin: false,
            shadeClose: true,
            area: ['800px', '350px'],
            content: $("#model")
            , success: function (layero) {
                //把内容放到遮罩层里
                var mask = $(".layui-layer-shade");
                mask.appendTo(layero.parent());
            }
        });
    });

    //提交表单
    form.on('submit(formDemo)', function(obj){
        brandRepeat($("#brand").val())
        $.ajax({
            url:'/eshop/product.do?m='+m,
            type:'post',
            data:obj.field,
            dataType:'json',
            success:function (data){
                layer.msg(JSON.stringify(data))
                if (data=='成功'){
                    layer.closeAll('page');
                    table1.reload('demo', {});
                }
            }
        })
        return false;
    });


    //验证商品品牌是否可以添加
    $("#brand").bind("blur",function () {
        brandRepeat($(this).val())
    })

})
//删除方法
function deleteData(id) {
    layer.confirm('您确定要删除这条数据吗？', {
        btn: ['确定','取消'] //按钮
    }, function()
    {
        layer.closeAll('dialog');
        $.ajax({
            type: 'get',
            url: '/eshop/product.do?m=delete',
            data: {id: id},
            success: function (data) {
                layer.msg(JSON.stringify(data))
                if (data == '删除成功') {
                    layer.closeAll('page');
                    table1.reload('demo', {});
                }
            }
        })
    });

    // layer.closeAll('dialog');  //点击确定关闭提示框

}

//修改方法
function update(id) {
    m='update'
    renderDropdownList()
    $.ajax({
        url:"/eshop/product.do?m=findByID",
        type:'get',
        data:{id:id},
        dataType: "json",
        success:function (data) {
            console.log(data);
            $("#id").val(data.id)
            $("#name").val(data.productName)
            $("#price").val(data.price)
            $("#brand").val(data.brand.brandName)
            $("#brand").val(data.brand.brandName)
            $("#productImg").attr("src","/eshop/Img.do?m=showImg&name="+data.productImage)
            $("#productImage").val(data.productImage)
            $("#desc").attr("src","/eshop/Img.do?m=showImg&name="+data.productDesc)
            $("#productDesc").val(data.productDesc)
            var select1 = 'dd[lay-value=' + data.pt.id + ']';
            $('#type').siblings("div.layui-form-select").find('dl').find(select1).click();
        }
    })
    layer.open({
        type: 1,
        title: "修改",
        maxmin: false,
        shadeClose: true,
        area: ['800px', '350px'],
        content: $("#model")
        , success: function (layero) {
            //把内容放到遮罩层里
            var mask = $(".layui-layer-shade");
            mask.appendTo(layero.parent());
        }
    });
}

//渲染下拉框方法
function renderDropdownList() {
    $.get("/eshop/productType.do?m=findAll",function (data) {
        $("#type>option:gt(0)").remove();
        data.forEach(function (e,i) {
            $("#type").append("<option value='"+e.id+"'><i class='fa "+e.productTypeIcon+"'></i>"+e.productTypeName+"</option>")
        })
        layui.form.render("select");
    })
}

//图片上传方法
layui.use('upload', function(){
    var upload = layui.upload;

    //执行实例
    upload.render({
        elem: '#file2' //绑定元素
        ,url: '/eshop/Img.do?m=uploadImg' //上传接口
        ,done: function(res){
            //let productImage = $($(this).attr("item")[0]).attr("id")
            $("#productDesc").val(res.data.src)
            $("#desc").attr("src","/eshop/Img.do?m=showImg&name="+res.data.src)
        }
        ,error: function(){
            //请求异常回调
            console.log("error")
        }
    });

    //执行实例
    upload.render({
        elem: '#file1' //绑定元素
        ,url: '/eshop/Img.do?m=uploadImg' //上传接口
        ,done: function(res){
            let productImage = $($(this).attr("item")[0]).attr("id")
            $("#productImage").val(res.data.src)
            $("#productImg").attr("src","/eshop/Img.do?m=showImg&name="+res.data.src)
        }
        ,error: function(){
            //请求异常回调
            console.log("error")
        }
    });
});

//时间转换函数
function add0(m){return m<10?'0'+m:m }
function format(shijianchuo) {
//shijianchuo是整数，否则要parseInt转换
    var time = new Date(shijianchuo);
    var y = time.getFullYear();
    var m = time.getMonth()+1;
    var d = time.getDate();
    var h = time.getHours();
    var mm = time.getMinutes();
    var s = time.getSeconds();
    return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
}

//图片悬浮放大
function hoverOpenImg(){
    var img_show = null; // tips提示
    $('td img').hover(function(){
        //alert($(this).attr('src'));
        var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:130px;' />";
        img_show = layer.tips(img, this,{
            tips:[2, 'rgba(41,41,41,.5)']
            ,area: ['160px']
        });
    },function(){
        layer.close(img_show);
    });
   // $('td img').attr('style','max-width:50px');
}

//验证品牌是否存在
function brandRepeat(name) {
    let msg;
    $.ajax({
        async: false,//同步
        url: "/eshop/brand.do?m=findByName&name=" + name,
        type: "get",
        dataType: "json",
        success: function (data) {
            console.log(data);
            if (data) {
                layer.msg(JSON.stringify("未存在该品牌，请先添加"))
                msg = 'false'
            } else
                msg = 'true'
        }
    })
    return msg
}


